<template>
  <div class="create-container">
    <NavBar title="创建群聊" left-arrow @click-left="handleBack"></NavBar>
    <div class="create-content">
      <!-- 表单 -->
      <van-form>
        <van-field v-model="form.name" name="name" label="群名称" placeholder="请输入群名称" />
        <van-field
          v-model="form.description"
          name="description"
          type="textarea"
          autosize
          label="群简介"
          placeholder="请输入群简介"
        />
      </van-form>
      <div class="create-button">
        <van-button
          :type="form.name && form.description ? 'primary' : 'default'"
          :disabled="!form.name && !form.description"
          @click="handleCreate"
          >立即创建</van-button
        >
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { ref } from 'vue'
import { chatApi } from '@/api/chat'

const router = useRouter()
const form = ref({
  name: '',
  description: '',
})

const handleBack = () => {
  router.back()
}

const handleCreate = async () => {
  try {
    const res = await chatApi.createRoom(form.value)
    router.replace({
      path: `/chat/detail/${res.id}`,
      query: {
        type: 'group',
        name: res.name,
      },
    })
  } catch (error) {
    console.log(error)
  }
}
</script>

<style scoped>
.create-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: relative;
}
.create-content {
  flex: 1;
  padding: 16px;
}

.create-button {
  width: 100vw;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--spacing-md);
}
:deep(.van-button) {
  border-radius: var(--radius-md);
  width: 100%;
}
:deep(.van-button--primary) {
  border: none;
  background-color: var(--color-primary);
}
</style>
